<template>
  <div class="headbar">
    <div class="left">
		<img src="../assets/headbar/xx.png" mode="" />
	</div>
    <div class="time">12:30PM</div>
    <div class="right">
		<img src="../assets/headbar/wifi.png" mode="" />
		<img src="../assets/headbar/ly.png" mode="" />
		<img src="../assets/headbar/dl.png" mode="" />
		<!-- <img src="../assets/headbar/ly" alt=""> -->
	</div>
  </div>
</template>

<script>
export default {};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.toolbar {
  width: 100%;

  /* filter: blur(2px); */
}

.time {
  flex-grow: 1;
  text-align: center;
  font-weight: bold;
  font-size: 10%;
  color: #515151;
}
.left {
  width: 10%;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  padding-left: 1%;
}
.right {
  width: 10%;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  padding-right: 2%;
}
.left img{
	margin:0 3%;
	justify-content: flex-start;
	width: 8%;
}
.right img{
	margin:0 3%;
	justify-content: flex-start;
	width: 10%;
}
</style>
